<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推文发布 - 应急管理</title>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link rel="icon" type="image/ico" href="pc/ico.png">
    <style>
        /* 通用样式 */
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #ff4e50;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        #editor-container {
            height: 300px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .ql-toolbar {
            border-radius: 5px 5px 0 0;
        }

        button {
            width: 100%;
            padding: 10px;
            border: none;
            background-color: #ff4e50;
            color: white;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
        }

        button:hover {
            background-color: #e64345;
        }

        /* 隐藏文件选择按钮 */
        #imageUpload {
            display: none;
        }

    </style>
</head>
<body>

<div class="container">
    <h1>推文发布</h1>

    <div class="form-group">
        <label for="title">标题</label>
        <input type="text" id="title" placeholder="输入推文标题">
    </div>

    <div class="form-group">
        <label for="coverUrl">封面图 URL</label>
        <input type="text" id="coverUrl" placeholder="输入封面图 URL">
    </div>

    <div class="form-group">
        <label for="editor-container">内容</label>
        <div id="editor-container"></div>
        <input type="file" id="imageUpload" accept="image/*" onchange="uploadImage()"> <!-- 隐藏的图片上传输入 -->
    </div>

    <button onclick="publishPost()">发布推文</button>
</div>

<!-- 引入 Quill JS -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
    // 初始化 Quill 编辑器
    var quill = new Quill('#editor-container', {
        theme: 'snow',
        placeholder: '输入推文内容...',
        modules: {
            toolbar: {
                container: [
                    [{ 'header': [1, 2, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                    ['image', 'link'],
                    [{ 'align': [] }] // 添加对齐按钮
                ],
                handlers: {
                    'image': function() {
                        document.getElementById('imageUpload').click(); // 触发文件选择
                    }
                }
            }
        }
    });

    // 处理图片上传并插入编辑器
    function uploadImage() {
        const input = document.getElementById('imageUpload');
        const file = input.files[0];

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const base64Image = e.target.result;
                const range = quill.getSelection(); // 获取当前光标位置
                quill.insertEmbed(range.index, 'image', base64Image); // 插入 Base64 图片
            };
            reader.readAsDataURL(file);
        }
    }

    // 发布推文
    function publishPost() {
        const title = document.getElementById('title').value;
        const coverUrl = document.getElementById('coverUrl').value;
        const content = quill.root.innerHTML;

        if (!title || !content || !coverUrl) {
            alert("标题、封面图和内容不能为空！");
            return;
        }

        // 手动检查居中内容并添加相应类
        const editorContent = document.querySelector('#editor-container .ql-editor');
        editorContent.querySelectorAll('[style*="text-align: center"]').forEach(el => {
            el.classList.add('ql-align-center');
        });

        const postData = {
            title: title,
            coverUrl: coverUrl,
            content: content
        };

        // 调用发布接口，将数据发送到服务器
        fetch('/api/v1/posts/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(postData)
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('推文发布成功');
                    // 清空内容
                    document.getElementById('title').value = '';
                    document.getElementById('coverUrl').value = '';
                    quill.setText('');
                } else {
                    alert('推文发布失败，请重试');
                }
            })
            .catch(error => {
                console.error('发布推文时出错:', error);
                alert('发布推文时发生错误');
            });
    }
</script>

</body>
</html>
